<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Hello MUI</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="./css/mui.min.css">
    <link rel="stylesheet" href="./css/default.css">
</head>

<body>
<!--下拉刷新容器-->
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
    <div class="mui-scroll">
        <div class="top-title"></div>
        <!--数据列表-->
        <ul class="mui-table-view mui-table-view-chevron" id="dataList"></ul>
    </div>
</div>
<div class="bg">
    <div class="loading"></div>
</div>
<script src="./js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<script src="./js/mui.min.js" type="text/javascript" charset="utf-8"></script>
<script>
    // //进度显示
    $('.bg').css('display', 'flex');

    mui.init({
        pullRefresh: {
            container: '#pullrefresh',
            down: {
                style: 'circle',
                callback: pulldownRefresh
            },
            // up: {
            // 	auto:true,
            // 	contentrefresh: '正在加载...',
            // 	callback: pullupRefresh
            // }
        }
    });

    var count = 0;

    function pullupRefresh() {
        setTimeout(function () {
            getDt('default');
        }, 1500);
    }

    pullupRefresh();

    function addData() {
        getDt('down');
    }

    /**
     * 下拉刷新具体业务实现
     */
    function pulldownRefresh() {
        setTimeout(function () {
            if (count < 3) {
                addData();
                mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
                mui.toast("为你推荐了5篇文章");
            } else {
                mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
                mui.toast("没有更多数据了");
            }
        }, 1500);
    }

    function getDt(ways) {
        count++;
        var table = document.body.querySelector('.mui-table-view');
        var cells = document.body.querySelectorAll('.mui-table-view-cell');
        var len;
        if (ways == 'default') {
            var newCount = cells.length > 0 ? 5 : 8;//首次加载7条，满屏
            for (var i = cells.length, len = i + newCount; i < len; i++) {
                var li = document.createElement('li');
                li.className = 'mui-table-view-cell';
                li.innerHTML = '<a class="mui-navigate-right" href="http://www.cnblogs.com/yingzi1028">Item ' + (i + 1) + '</a>';
                table.appendChild(li);
            }
        }
        if (ways == 'down') {
            for (var i = cells.length, len = i + 5; i < len; i++) {
                var li = document.createElement('li');
                li.className = 'mui-table-view-cell';
                li.innerHTML = '<a class="mui-navigate-right" href="http://www.cnblogs.com/yingzi1028">Item ' + (i + 1) + '</a>';
                //下拉刷新，新纪录插到最前面；
                table.insertBefore(li, table.firstChild);
            }
        }
        //进度隐藏
        $('.bg').css('display', 'none');
    }

    mui('body').on('tap', 'a', function () {
        window.top.location.href = this.href;
    });
    $('a').ontouchstart = function (e) {
        e.preventDefault();
    };
</script>
</body>

</html>